<template>
	<div class="books">
		<ul class="infinite-list" style="overflow:hidden">
			<li v-for="(item, i) in books" :key="item.id" class="infinite-list-item">
				<input style="border-radius: 50%;" type="checkbox" v-model="item.isChecked" />
				<img :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`" @click="details(item.book.id)" />
				<div class="div">
					<div style="width: 60%;">
						<h3 style="font-weight: 500; margin-bottom: 2rem;">{{item.book.name}}</h3>
						<h3 style="font-weight: 500; margin-top: 2.5rem; color: #E00000;">￥{{item.price}}</h3>
					</div>
					<div class="div2">
						<p style="width: 2rem;text-align: center;" v-if="item.revise == false"
							@click="item.revise = true">
							x{{item.num}}
						</p>
						<p v-if="item.revise">
							<button @click="ToggleNum(i,-1)">
								<i class="el-icon-minus"></i>
							</button>
							<span>{{item.num}}</span>
							<button @click="ToggleNum(i,1)">
								<i class="el-icon-plus"></i>
							</button>
						</p>
					</div>
				</div>
				<img class="omit" src="@/assets/img/mobile/omit.png" @click="action(i)" />
			</li>
		</ul>
		<ul>
			<li>
				<router-link to="/mobile/booklist" class="findbook">
					<div>
						<h1 style="font-weight: 500;">+</h1>
						<p style="font-size: 0.8rem;">去找书</p>
					</div>
				</router-link>
				<div style="width: 75%;"></div>
			</li>
		</ul>

		<div v-if="books.length > 0">
			<el-dialog :visible="centerDialogVisible" title="title" width="100%" top="67vh" :lock-scroll="false"
				:show-close="false" class="dialog">
				<div slot="title" style="display: flex; align-items: center; height: 4rem;">
					<img :src="`http://127.0.0.1/api/public/showimg/${books[bookid].book.pic}`" />
					<h3 style="font-weight: 500;">{{books[bookid].book.name}}</h3>
				</div>
				<div class="dialog-body">
					<el-button type="danger" @click="btn()">删 除</el-button>
					<el-button type="success" @click="btn2()">置 顶</el-button>
				</div>
			</el-dialog>
		</div>

		<div class="order">
			<p>
				<input type="checkbox" v-model="checkall" @click="changeAll" />全选
			</p>
			<div>
				<span>合计:<b>￥{{SumPrice}}</b></span>
				<button @click="settlement()">结算</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileBooks',
		data() {
			return {
				books: [],
				centerDialogVisible: false,
				bookid: 0,
				checkall: false
			}
		},
		async mounted() {
			await this.$axios.get("/api/fore/cart/findMyCarts", this.$store.state.token).then(res => {
				this.books = res.data.data
				this.books.forEach((item, i) => {
					item.price = item.price.toFixed(2)
				})
				this.books = this.books.map(item => {
					return {
						...item,
						revise: false,
						isChecked: false
					}
				})
			})
		},
		computed: {
			SumPrice() {
				let sum = 0;
				this.books.forEach((item, i) => {
					if (item.isChecked) {
						sum += item.price * item.num;
					}
				})
				return sum.toFixed(2);
			}
		},
		watch: {
			books: {
				handler() {
					this.checkall = this.books.every((item) => {
						return item.isChecked == true
					})
				},
				deep: true
			}
		},
		methods: {
			action(id) {
				this.centerDialogVisible = true
				this.bookid = id
			},
			ToggleNum(id, type) {
				this.books[id].num = this.books[id].num + type
				if (this.books[id].num < 1) {
					this.books[id].num = 1
				}
			},
			details(bookid) {
				this.$router.push({
					path: '/mobile/bookdetail/' + bookid
				});
			},
			changeAll() {
				this.books.forEach(item => {
					item.isChecked = !this.checkall
				});
			},
			settlement() {
				this.$router.push({
					path: '/mobile/orders'
				});
			},
			btn() {
				this.centerDialogVisible = false;
			},
			btn2() {
				this.centerDialogVisible = false;
			},
		}
	}
</script>

<style>
	.books {
		min-height: 84vh;
		height: auto;
		margin-bottom: 8rem;
	}

	.books ul::-webkit-scrollbar {
		display: none;
	}

	.books ul {
		-ms-overflow-style: none;
		scrollbar-width: none;
		margin-top: 1rem;
	}

	.books img {
		width: 4rem;
		height: 5.5rem;
		border-radius: 0.3rem;
		margin: 1rem;
	}

	.books ul li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 7rem;
		margin-top: 0.1rem;
	}

	.books ul li .div {
		width: 65%;
		display: flex;
		justify-content: space-between;
	}

	.books ul li .div2 {
		border: 1px solid #d3d3d3;
		background-color: white;
		border-radius: 0.5rem;
		height: 1.3rem;
		display: flex;
		align-items: center;
	}

	.books ul li .div2 button {
		border: none;
		background-color: white;
		border-radius: 1rem;
	}

	.books ul li .div2 span {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		border: 1px solid #d3d3d3;
	}

	.books .omit {
		width: 2.5rem;
		height: 2.5rem;
	}

	.books .findbook {
		margin-top: 3rem;
		margin-left: 2rem;
		width: 5rem;
		height: 7rem;
		border-radius: 0.3rem;
		background-color: #d3d3d3;
		text-align: center;
		color: #aaaaaa;
		margin-right: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.books .el-dialog {
		position: absolute;
		margin: 0;
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
		background: linear-gradient(to bottom, #7f7f7f, white);
	}

	.books .el-dialog__header {
		/* opacity: 0.7; */
		border-top-left-radius: 2rem;
		border-top-right-radius: 2rem;
	}

	.books .el-dialog__body {
		width: 100%;
		height: 4rem;
		display: flex;
		align-items: center;
	}

	.books .el-dialog__body .dialog-body {
		width: 90%;
		height: 4rem;
		background-color: white;
		border-radius: 1rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.books .order {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.books .order span {
		margin-right: 1rem;
	}
	
	.books .order span b {
		font-size: 1.4rem;
		color: #ff681c;
	}
	
	.books .order button {
		width: 8rem;
		height: 3rem;
		border-radius: 2rem;
		border: none;
		background: linear-gradient(to right, #ffa70e, #ff681c);
		color: white;
		font-size: 1.4rem;
	}
	
</style>